Playground and get started #1240

sfc-gh-dmatthews · 2025-03-05T23:01:14Z

📚 Context

Introduce the Streamlit Playground in Get started.

🧠 Description of Changes

Add another page to setup/installation to introduce the Streamlit Playground.
Add a little color and pizazz to the installation overview page.

Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

sfc-gh-dmatthews · 2025-03-05T23:02:03Z

TODO: Update URLs. I changed installation to setup, but didn't change the URLs yet, since I'll do that at the end in case of other changes/edits to names.

sfc-gh-tteixeira

I haven't reviewed the new design yet, so not approving yet!

sfc-gh-tteixeira · 2025-03-05T23:59:06Z

content/get-started/installation/_index.md

-</RefCard>
-
-</TileContainer>
+## General setup and installation


FWIW I think the previous wording made it clearer that if you're an expert you don't have to read the rest of these.

I moved the Playground up to highlight it further and added a little explainer blurb to emphasize to completely new or random passersby that the Playground is the easiet way to get a taste before choosing one of the local or cloud setup options below.

sfc-gh-tteixeira · 2025-03-06T00:01:29Z

content/menu.md

    url: /get-started/installation
-  - category: Get started / Installation / Use command line
+  - category: Get started / Setup / LOCAL DEVELOPMENT
+  - category: Get started / Setup / Use Streamlit Playground ✨


Shouldn't this be under CLOUD DEVELOPMENT ?

It uses your machine's local resources, though. It runs in your browser, but uses your own hardware, not a cloud server.

I moved it up to highlight it separately, which brushes the distinction under the rug. :)

Still feels funny...

I think the first thing under the Setup section needs to be how to install locally. Also, I guess the real problem is that it doesn't really feel like the playground belongs in the Setup section.

What if we pulled it out of that menu and renamed the menu to Installation?

Get started

Playground

Installation

LOCAL DEVELOPMENT

Install via command line

Install via Anaconda Distribution

CLOUD DEVELOPMENT

Use GitHub Codespaces

Use Snowflake

Fundamentals

First steps

Develop

Deploy

Knowledge base

sfc-gh-tteixeira · 2025-03-06T00:02:09Z

content/get-started/installation/streamlit-playground.md

+- Start playing with code right away, completely in your browser.
+- No configuration.
+- No command line.
+- No application installations in your OS.


You should make it clear that the playground doesn't support all Streamlit and Python features.

I call this out in the <Note> immediately following the conveniences list. Would making it two bullet points or two paragraphs make it clearer? Or maybe use <Important> instead of <Nonte>?

I did the following:

Switched the <Note> to <Important>.

Moved the warning about local hardware out of the admonition, sprinkling it into the prerequisites and "wait" step.

Added emphasis to limited in the first paragraph.

sfc-gh-dmatthews · 2025-03-06T06:55:50Z

I'm also thinking to cut the bottom margin for InlineCalloutContainer in half. (Some design thoughts shared in the Streamlit docs Slack channel.)

sfc-gh-tteixeira · 2025-03-08T00:27:47Z

content/get-started/installation/streamlit-playground.md

+
+## Prerequisites
+
+Because the Playground runs Streamlit _locally_ in your browser, you should visit the Playground from a personal computer, not a mobile device.


I don't understand this paragraph. The playground should work find on mobile too.

If you don't think there are any performance issues running on mobile devices, I can remove the warning.

I have two concerns about people using mobile devices:

It downloads (perhaps) an unexpected amount of data when visiting the page in order to use the browser itself to run the Streamlit server. This isn't some remote machine running executing the Python code.

They may be a bad user experience without the side-by-side view and a full keyboard (though this is a secondary concern for me relative to the first).

sfc-gh-tteixeira · 2025-03-08T00:29:15Z

content/get-started/installation/streamlit-playground.md

+
+1. Go to [streamlit.io/playground](https://streamlit.io/playground).
+
+1. Wait for [`stlite`](https://github.com/whitphx/stlite) &mdash; a browser-based version of Streamlit &mdash; to load in your browser.


I don't think you should mention stlite here. It's just confusing to the user.

Instead just say something like: Wait for the playground to load. Behind the scenes this downloads a version of Python and Streamlit that your browser can run, so this may take a bit of time.

sfc-gh-tteixeira · 2025-03-08T00:29:53Z

content/get-started/installation/streamlit-playground.md

+
+   ![Streamlit Playground is fully loaded and ready to accept code edits](/images/get-started/Playground-1-loaded.png)
+
+## Create a `Hello World` app


Maybe tell users to click on different example apps and play with them first?

sfc-gh-tteixeira · 2025-03-08T00:37:29Z

content/get-started/installation/streamlit-playground.md

+
+## What's next?
+
+Read about our [Basic concepts](/get-started/fundamentals/main-concepts) and try out more commands in your app.


I think "what's next" should point people toward installing Streamlit. Maybe something like:

What's next?

At this point you have two options:

You can continue learning Streamlit through the playground -- great for learning and quick snippets.

Or get started for real by installing Streamlit on your machine or the cloud.

sfc-gh-tteixeira · 2025-03-08T00:43:20Z

content/menu.md

    url: /get-started/installation
-  - category: Get started / Installation / Use command line
+  - category: Get started / Setup / LOCAL DEVELOPMENT
+  - category: Get started / Setup / Use Streamlit Playground ✨


Still feels funny...

I think the first thing under the Setup section needs to be how to install locally. Also, I guess the real problem is that it doesn't really feel like the playground belongs in the Setup section.

What if we pulled it out of that menu and renamed the menu to Installation?

Get started

Playground

Installation

LOCAL DEVELOPMENT

Install via command line

Install via Anaconda Distribution

CLOUD DEVELOPMENT

Use GitHub Codespaces

Use Snowflake

Fundamentals

First steps

Develop

Deploy

Knowledge base

sfc-gh-tteixeira · 2025-03-08T00:44:27Z

content/get-started/installation/_index.md

+
+There are many ways to get started coding with Streamlit. If you're brand new to Streamlit or just passing through on a random internet walk, we recommend using the Streamlit Playground for your first hands-on experience. It's quick and ready to go in your browser. After you experience the awesomeness of Streamlit, we're confident you'll want to come back and set up a full development environment, which you can do locally or in the cloud, as described in the options below.
+
+<InlineCalloutContainer>


You're doing heroic work, but I think we need a design pass here.

I can take a pass directly in the code and share it with you. Or we can meet and do it live. LMK what you prefer.

I love our pair programming sessions and I think that will be faster. I was trying to mostly work within the components I already have, but I also have vague design ideas to go a little further. We can also talk about user journeys here. (Like whether someone might use the playground to walk through Basics or not.) 😁

sfc-gh-dmatthews · 2025-09-15T21:11:53Z

I used option 7, but a couple edits:

The component rework broke dark mode color for the arrow link, so I tweaked that. (I don't know why, but some style doesn't correctly apply when you use dark: inline with other styles and requires :global(dark).
I really don't like just "Experts" because....experts in what? In Streamlit? In frontend development? So, I changed it to "experienced Python developers." (I still have qualms because "how experienced," but it's less mental chafing.)
- I also shorted the instructions to just one block. We're already making assumptions about knowledge, so I don't want to belabor the point.
I used sampling instead of taste to avoid non-literal language.

sfc-gh-tteixeira · 2025-09-16T13:40:41Z

content/get-started/installation/_index.md

+
+Try a version of Streamlit that runs in your browser&mdash;no installation required.
+(This is not how Streamlit is meant to be used, because it has many downsides. That's why it's a
+_playground_!)


I know this is heavily borrowed from my own text, but how about this change:

Try a Streamlit Playground that runs in your browser—no installation required. (Note that this is not how Streamlit is meant to be used, because it has many downsides. That's why it's a
playground!)

sfc-gh-tteixeira · 2025-09-16T13:41:28Z

content/get-started/installation/_index.md

+
+Try a version of Streamlit that runs in your browser&mdash;no installation required.
+(This is not how Streamlit is meant to be used, because it has many downsides. That's why it's a
+_playground_!)


I know this is heavily borrowed from my own text, but how about this change:

Try a Streamlit Playground that runs in your browser—no installation required. (Note that this is not how Streamlit is meant to be used, because it has many downsides. That's why it's a
playground!)

sfc-gh-tteixeira · 2025-09-16T13:45:09Z

Comment on the design (I haven't looked at the code yet)

I like it! The one thing that I was worried about when I made a similar design is that there a lot of arrows when you get to the bottom of the screen. That's why I tried a design with a different type of icon as well. But this is somewhat minor. I can live with it.

sfc-gh-tteixeira · 2025-09-16T13:46:13Z

content/menu.md

    url: /get-started/installation
-  - category: Get started / Installation / Use command line
+  - category: Get started / Installation / LOCAL DEVELOPMENT
+  - category: Get started / Installation / Use Streamlit Playground ✨


Nit: Can we remove the emoji? First because I think it doesn't look great to have an emoji here, but second because this specific emoji has come to mean "AI", which this playground doesn't have.

sfc-gh-tteixeira · 2025-09-18T00:08:37Z

I've pushed some changes to the colors. These look good with both light and dark modes on my machine.

sfc-gh-tteixeira · 2025-09-18T00:10:02Z

content/get-started/installation/_index.md

+## Create an app in the cloud

-<h5>Option 3: I'd rather use a cloud-based environment</h5>
+### Option 1: I want a free cloud environment


Non-blocking: I'd love to make option 1 feel more like the community option, and option 2 like the pro option.

sfc-gh-tteixeira · 2025-09-18T00:10:50Z

content/get-started/installation/_index.md

+_playground_!)
+
+<IconLink
+    href="/get-started/installation/streamlit-playground"


Non-blocking: Why not just link straight to the playground? Isn't it self-explanatory enough?

sfc-gh-dmatthews added 2 commits March 5, 2025 14:43

Add Playground to Get started

27d66b5

Use titles and quoted text

5d653dc

sfc-gh-dmatthews requested a review from sfc-gh-tteixeira March 5, 2025 23:02

sfc-gh-tteixeira reviewed Mar 6, 2025

View reviewed changes

sfc-gh-dmatthews added 3 commits March 5, 2025 22:07

Show quotes inline with platform

6e5902a

Rework the limitation notes for Playground

1964d5f

Further highlight playground

aae3137

Consitent Hello world example for Playground

374fcce

sfc-gh-tteixeira reviewed Mar 8, 2025

View reviewed changes

sfc-gh-tteixeira force-pushed the playground-and-get-started branch from 374fcce to 6798014 Compare March 8, 2025 06:23

sfc-gh-dmatthews force-pushed the playground-and-get-started branch from 6798014 to 374fcce Compare March 9, 2025 00:22

sfc-gh-tteixeira added 3 commits September 11, 2025 23:09

Go back to previous wording in a few places.

4e02907

Improve styles and components.

e3d8c12

Add different potential designs for the Installation steps.

f3201b5

sfc-gh-tteixeira requested a review from a team as a code owner September 13, 2025 01:38

sfc-gh-dmatthews added 4 commits September 15, 2025 14:02

Use option 7

1f63cef

Fix dark mode styling

ff210af

Merge branch 'main' into playground-and-get-started

dd9f37d

Remove debug line

610cb21

Fix liks and edits

7d1950e

sfc-gh-dmatthews removed the request for review from a team September 15, 2025 21:31

sfc-gh-dmatthews added 2 commits September 15, 2025 16:37

Prevent RefCard from going under left nav

574eb11

Combine design 2 and 6

2bf4096

sfc-gh-tteixeira reviewed Sep 16, 2025

View reviewed changes

Review edits

ada85d5

sfc-gh-dmatthews requested a review from sfc-gh-tteixeira September 16, 2025 18:32

sfc-gh-dmatthews and others added 2 commits September 17, 2025 10:43

Office hour comments

609d805

Improve colors.

518280f

sfc-gh-tteixeira approved these changes Sep 18, 2025

View reviewed changes

sfc-gh-dmatthews merged commit b3f5931 into main Sep 18, 2025
4 checks passed

sfc-gh-dmatthews deleted the playground-and-get-started branch September 18, 2025 15:35


		## Prerequisites

		Because the Playground runs Streamlit _locally_ in your browser, you should visit the Playground from a personal computer, not a mobile device.


		1. Go to [streamlit.io/playground](https://streamlit.io/playground).

		1. Wait for [`stlite`](https://github.com/whitphx/stlite) — a browser-based version of Streamlit — to load in your browser.


		![Streamlit Playground is fully loaded and ready to accept code edits](/images/get-started/Playground-1-loaded.png)

		## Create a `Hello World` app


		## What's next?

		Read about our [Basic concepts](/get-started/fundamentals/main-concepts) and try out more commands in your app.


		There are many ways to get started coding with Streamlit. If you're brand new to Streamlit or just passing through on a random internet walk, we recommend using the Streamlit Playground for your first hands-on experience. It's quick and ready to go in your browser. After you experience the awesomeness of Streamlit, we're confident you'll want to come back and set up a full development environment, which you can do locally or in the cloud, as described in the options below.

		<InlineCalloutContainer>

Playground and get started #1240

Playground and get started #1240

Uh oh!

Conversation

sfc-gh-dmatthews commented Mar 5, 2025

📚 Context

🧠 Description of Changes

Uh oh!

sfc-gh-dmatthews commented Mar 5, 2025

Uh oh!

sfc-gh-tteixeira left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-dmatthews Mar 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-dmatthews Mar 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-tteixeira Mar 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-dmatthews Mar 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-dmatthews commented Mar 6, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

What's next?

Uh oh!

sfc-gh-tteixeira Mar 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-dmatthews commented Sep 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-tteixeira commented Sep 16, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sfc-gh-tteixeira commented Sep 18, 2025

Uh oh!

Choose a reason for hiding this comment

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-tteixeira Mar 8, 2025 •

edited

Loading

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-tteixeira Mar 8, 2025 •

edited

Loading

sfc-gh-dmatthews commented Sep 15, 2025 •

edited

Loading